<template>
	<view class="uni-container">
		<uni-forms ref="form" v-model="formData" validateTrigger="bind" @submit="submit">
			<uni-forms-item name="id" label="编号">
				<input type="number" @input="changeSwich('id', $event.detail.value)" class="uni-input-border" :value="formData.id" />
			</uni-forms-item>
			<uni-forms-item name="monthlySale" label="月售量">
				<input type="number" @input="changeSwich('monthlySale', $event.detail.value)" class="uni-input-border" :value="formData.monthlySale" />
			</uni-forms-item>
			<uni-forms-item name="shopid" label="店铺id">
				<input type="number" @input="changeSwich('shopid', $event.detail.value)" class="uni-input-border" :value="formData.shopid" />
			</uni-forms-item>
			<!-- <uni-forms-item name="shop" label="店铺">
  <uni-data-checkbox :range="formOptions.shop_range" :multiple="true" @change="changeSwich('shop', $event.detail.value)" v-model="formData.shop" />
</uni-forms-item> -->
			<uni-forms-item name="stock" label="剩余库存">
				<input type="number" @input="changeSwich('stock', $event.detail.value)" class="uni-input-border" :value="formData.stock" />
			</uni-forms-item>
			<uni-forms-item name="visite" label="浏览量">
				<input type="number" @input="changeSwich('visite', $event.detail.value)" class="uni-input-border" :value="formData.visite" />
			</uni-forms-item>
			<uni-forms-item name="isSold" label="是否销售">
				<uni-data-checkbox :range="formOptions.isSold_range" @change="changeSwich('isSold', $event.detail.value)" v-model="formData.isSold" />
			</uni-forms-item>
			<uni-forms-item name="posid" label="排序">
				<input type="number" @input="changeSwich('posid', $event.detail.value)" class="uni-input-border" :value="formData.posid" />
			</uni-forms-item>
			<uni-forms-item name="score" label="评分">
				<input placeholder="商品评分，1-10" type="number" @input="changeSwich('score', $event.detail.value)" class="uni-input-border"
				 :value="formData.score" />
			</uni-forms-item>

			<view class="uni-button-group">
				<button style="width: 100px;" type="primary" class="uni-button" @click="submitForm">提交</button>
				<navigator open-type="navigateBack" style="margin-left: 15px;"><button style="width: 100px;" class="uni-button">返回</button></navigator>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import validator from '@/js_sdk/validator/cloud_goods.js';

	const db = uniCloud.database();
	const dbCmd = db.command;
	const dbCollectionName = 'cloud_goods';

	function getValidator(fields) {
		let reuslt = {}
		for (let key in validator) {
			if (fields.includes(key)) {
				reuslt[key] = validator[key]
			}
		}
		return reuslt
	}

	export default {
		data() {
			return {
				formOptions: {
					"isSold_range": [{
							"text": "下架",
							"value": 0
						},
						{
							"text": "在售",
							"value": 1
						}
					]
				},
				formData: {
					"id": null,
					"src": null,
					"title": null,
					"subTitle": null,
					"price": null,
					"originPrice": null,
					"monthlySale": null,
					"shopid": null,
					"shop": [],
					"stock": null,
					"visite": null,
					"isSold": 0,
					"posid": null,
					"score": null
				},
				rules: {
					...getValidator(["id", "src", "title", "subTitle", "price", "originPrice", "monthlySale", "shopid", "stock",
						"visite", "isSold", "posid", "score", "shop"
					])
				}
			}
		},
		onLoad(e) {
			const id = e.id
			this.formDataId = id
			this.getDetail(id)
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			/**
			 * 触发表单提交
			 */
			submitForm(form) {
				this.$refs.form.submit();
			},

			/**
			 * 表单提交
			 * @param {Object} event 回调参数 Function(callback:{value,errors})
			 */
			submit(event) {
				const {
					value,
					errors
				} = event.detail

				// 表单校验失败页面会提示报错 ，要停止表单提交逻辑
				if (errors) {
					return
				}

				uni.showLoading({
					title: '修改中...',
					mask: true
				})

				// 使用 unicloud-db 提交数据
				db.collection(dbCollectionName).where({
					_id: this.formDataId
				}).update(value).then((res) => {
					uni.showToast({
						title: '修改成功'
					})
					this.getOpenerEventChannel().emit('refreshData')
					setTimeout(() => uni.navigateBack(), 500)
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},

			/**
			 * 获取表单数据
			 * @param {Object} id
			 */
			getDetail(id) {
				uni.showLoading({
					mask: true
				})
				db.collection(dbCollectionName).where({
					_id: id
				}).get().then((res) => {
					const data = res.result.data[0]
					if (data) {
						this.formData = data
					}
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>
